<template>
    <div id="search">
        <form>
            <router-link to="/">
                <i class="iconfont">&#xe618;</i>
            </router-link>
            <input type="search" placeholder="请输入商品名称">
        </form>
        <h2>热门搜索</h2>
        <section>
            <span :key="index" v-for="(item, index) in hot_search">{{item.word}}</span>
        </section>
        <router-view />
    </div>
</template>

<script>
import axios from 'axios'
import Router from 'vue-router'
export default {
    name: 'search',
    data () {
        return {
            hot_search: []
        }
    },
    mounted () {
        var that = this
        axios.get('http://localhost:3000/hot_search', {
            params: {
                geohash: 'ws105rz9smwm',
                latitude: that.$store.state.str.latitude,
                longitude: that.$store.state.str.longitude
            }
        }).then(function (res) {
            that.hot_search = res.data
        }).catch(function (err) {
            console.log(err)
        })
    }
}
</script>

<style lang="scss" scoped>
@import '../../static/px2rem.scss';
#search {
    width: 100%;
    form {
        padding: px2rem(11);
        height: px2rem(35);
        display: flex;
        i {
            width: px2rem(30);
            height: px2rem(25);
            padding: px2rem(5) px2rem(5) px2rem(5) 0;
            display: inline-block;
            font-weight: bold;
            color: #999;
            line-height: px2rem(25);
            text-align: center;
            font-size: px2rem(18);
        }
        input {
            border-radius: px2rem(15);
            flex: 1;
            height: px2rem(35);
            background-color: #f8f8f8;
            font-size: px2rem(15);
            padding: 0 px2rem(15);
            color: #666;
            border: none;
            outline: none;
        }
    }
    h2 {
        color: #666;
        padding-left: px2rem(12.5);
        margin: px2rem(45) 0 px2rem(10);
    }
    section{
        padding: 0 px2rem(12.5);
        span{
            display: inline-block;
            padding: px2rem(7.5) px2rem(10);
            display: inline-block;
            color: #666;
            background-color: #f7f7f7;
            margin: px2rem(12.5) px2rem(12.5) 0 0;
            font-size: px2rem(14);
        }
    }
}
</style>
